<template>
  <!-- 日期显示 -->
  <view class="month">
    <view class="month-box" v-for="(dateInfo, dateIndex) in months" :key="dateIndex">
      <view class="month-box-date"
        @tap="chooseDate(getAssignDateInfo(false, 0) + '-' + (Number(startMonth) + dateIndex))">
        <view :class="dateActiveIndex(dateIndex) ? 'textActiveColor' : 'month-box-date-text'">
          {{ Number(startMonth) + dateIndex }}月
        </view>
        <view class="month-box-date__isToday" v-if="getAssignDateInfo(true, 0) == getAssignDateInfo(false, 0) &&
      getAssignDateInfo(true, 1) == Number(startMonth) + dateIndex &&
      showActive

      "></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    months: {
      //月数
      type: [Number, String],
      default: 6,
    },
    startMonth: {
      //起始月份
      type: [Number, String],
      default: 1,
    },
    dateActiveColor: {
      //日期选中背景颜色
      type: String,
      default: '#62AEF8',
    },
    // textActiveColor: {
    //   // 日期选中文字颜色
    //   type: String,
    //   default: '#FFFFFF',
    // },
    selectedDate: {
      //选中的年月
      type: [Number, String],
      default: 1,
    },
    currentDate: {
      //当前年月
      type: String,
      default: '',
    },
    showActive: {
      //是否展示高亮
      type: Boolean,
      default: true,
    },
  },
  computed: {
    dateActiveIndex() {
      return (dateIndex) => {
        return this.showActive
          ? this.getAssignDateInfo(false, 1) == Number(this.startMonth) + dateIndex
          : false;
      };
    },
    getAssignDateInfo() {
      return (isToday, index) => {
        return (isToday ? this.currentDate : this.selectedDate).split('-')[index] * 1;
      };
    },
  },
  methods: {
    chooseDate(selectedDate) {
      this.$emit('chooseDate', selectedDate);
    },
  },

};
</script>

<style lang="scss" scoped>
.month {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;

  &-box {
    position: relative;
    // padding: 8rpx 22rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    margin: 12px 0;

    &-date {
      &-text {
        color: $uni-color-primary;
        font-weight: 500;
        font-size: 22rpx;
        border: 2rpx solid #E7EBFF;
        padding: 10rpx 30rpx;
        border-radius: 12rpx;

      }

      &__isToday {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        color: $uni-bg-color;
        font-weight: 500;
        font-size: 22rpx;
        border-radius: 12rpx;
        z-index: -1;
        opacity: 0.4;
        background: #2a4ab7;
      }
    }
  }

  .textActiveColor {
    color: $uni-bg-color;
    font-weight: 500;
    font-size: 22rpx;
    padding: 10rpx 30rpx;
    border-radius: 12rpx;
    background-color: $uni-color-primary;
  }
}
</style>